<example name="Dropdown">
  <file type="html">
    <div id="dropdown"></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';

    import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
    import Popup from '@jetbrains/ring-ui/components/popup/popup';

    const container = document.getElementById('dropdown');
    const dropdown = (
    <Dropdown
      anchor="Click me"
    >
      <Popup>Popup content</Popup>
    </Dropdown>
    );

    render(dropdown, container);
  </file>
</example>

<example name="Dropdown with custom anchor and popup">
  <file type="html" disable-auto-size>
    <div id="dropdown"></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';

    import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';

    const container = document.getElementById('dropdown');
    const actions = ['Cut', 'Copy', 'Paste'];
    const dropdown = (
      <Dropdown
        anchor={<Button delayed={true}>Edit</Button>}
        >
        <PopupMenu
          closeOnSelect={true}
          data={actions.map(label => ({label}))}
        />
      </Dropdown>
    );

    render(dropdown, container);
  </file>
</example>

<example name="Dropdown with activeClassName">
  <file type="html">
    <div id="dropdown"></div>
  </file>

  <file type="css">
    @value gray-color, link-hover-color from "../global/global.css";

    :global(.chevron) {
      display: inline-block;
      color: gray-color;
      transition: all 0.3s ease-out;
      transform: rotate(0deg);

      &:hover {
        transition: transform 0.15s ease-out;
        color: link-hover-color;
      }
    }

    :global(.rotated) {
      transform: rotate(180deg);
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';

    import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
    import Popup from '@jetbrains/ring-ui/components/popup/popup';
    import Icon from '@jetbrains/ring-ui/components/icon/icon';
    import chevronIcon from '@jetbrains/icons/chevron-down.svg';

    const container = document.getElementById('dropdown');
    const dropdown = (
      <Dropdown
        className="chevron"
        activeClassName="rotated"
        anchor={
          <Icon
            glyph={chevronIcon}
            size={Icon.Size.Size18}
          />
        }
      >
        <Popup>Popup content</Popup>
      </Dropdown>
    );

    render(dropdown, container);
  </file>
</example>
